import { useRef, useCallback } from 'react';
import { Modal } from 'antd';
import { uuid } from '@inbiz/utils';
import { getMessage, TextWidget } from '@inbiz/react';
import EditableTable from '@common/EditableTable';

import './index.less';

const buttonConfig = [
  {
    name: 'processButton.initiate',
    value: 'initiate',
    type: 'initiate',
    taskType: 'faqishenqing',
  },
  {
    name: 'processButton.approve',
    value: 'approve',
    type: 'approve',
    taskType: 'wodedaiban',
  },
  {
    name: 'processButton.returnsBack',
    value: 'returnsBack',
    type: 'returnsBack',
    taskType: 'wodedaiban',
    buttontype: 'web',
  },
  {
    name: 'processButton.returnPrestep',
    value: 'returnsBack',
    type: 'returnsBack',
    taskType: 'wodedaiban',
    buttontype: 'wap',
  },
  {
    name: 'processButton.returnsStarter',
    value: 'returnsStarter',
    type: 'returnsStarter',
    taskType: 'wodedaiban',
    buttontype: 'wap',
  },
  {
    name: 'processButton.returnsStartModify',
    value: 'returnsStartModify',
    type: 'returnsStartModify',
    taskType: 'wodedaiban',
    buttontype: 'wap',
  },
  {
    name: 'processButton.cancel',
    value: 'cancel',
    type: 'cancel',
    taskType: 'wodeyiban',
  },
  {
    name: 'processButton.withDraw',
    value: 'withDraw',
    type: 'withDraw',
    taskType: 'applys',
  },
  {
    name: 'processButton.plusSign',
    value: 'plusSign',
    type: 'plusSign',
    taskType: 'wodedaiban',
    buttontype: 'web',
  },
  {
    name: 'processButton.fowardPlusSign',
    value: 'fowardPlusSign',
    type: 'fowardPlusSign',
    taskType: 'wodedaiban',
    buttontype: 'wap',
  },
  {
    name: 'processButton.backwardPlusSign',
    value: 'backwardPlusSign',
    type: 'backwardPlusSign',
    taskType: 'wodedaiban',
    buttontype: 'wap',
  },
  {
    name: 'processButton.print',
    value: 'print',
    type: 'print',
    taskType: 'wodedaiban',
    buttontype: 'web',
  },
  {
    name: 'processButton.isUrge',
    value: 'isUrge',
    type: 'isUrge',
    taskType: 'shenqingzhong',
  },
  {
    name: 'processButton.draft',
    value: 'draft',
    type: 'draft',
    taskType: 'faqishenqing',
  },
  {
    name: 'processButton.custom',
    value: 'custom',
    type: 'custom',
    taskType: 'wodedaiban',
  },
];

const ProcessConfigModal = (props: any) => {
  const { value, onChange, tableVisible, $tableVisible, buttontype } = props;
  const tableRef = useRef<any>();

  // 配置按钮成功
  const handleOk = async () => {
    const list = await tableRef.current.getData();
    $tableVisible(false);
    onChange(list);
  };

  // 关闭按钮列表弹窗
  const handleCancel = () => {
    $tableVisible(false);
  };
  const newButtonConfig = buttonConfig.filter(
    (item) => item.buttontype == buttontype || !item.buttontype,
  );
  const tableColumns = [
    {
      title: getMessage('processButton.action'),
      dataIndex: 'action',
      editData: {
        type: 'Select',
        options: newButtonConfig,
        rules: [
          {
            required: true,
          },
        ],
        afterEdit: (val: string, data: object) => {
          const obj = newButtonConfig.find(
            (item: { value: string; name: string }) => item.value == val,
          );
          data.name = obj?.name;
          data.type = obj?.type;
          data.taskType = obj?.taskType;
          return data;
        },
      },
      render: (val) => {
        const obj = newButtonConfig.find(
          (item: { value: string; name: string }) => item.value == val,
        ) || { name: '' };
        return <TextWidget>{obj.name || ''}</TextWidget>;
      },
    },
    {
      title: getMessage('processButton.buttonName'),
      dataIndex: 'name',
      editData: {
        type: 'Input',
        rules: [
          {
            required: true,
          },
        ],
      },
      render: (text) => <TextWidget>{text}</TextWidget>,
    },
    {
      title: getMessage('processButton.labeltext'),
      dataIndex: 'type',
      editData: {
        type: '',
        rules: [
          {
            required: true,
          },
        ],
      },
      // render: (text) => <TextWidget>{`processButton.${text}`}</TextWidget>
    },
    {
      title: getMessage('processButton.bgColor'),
      dataIndex: 'bgColor',
      editData: {
        type: 'Color',
        value: '#1989fa',
      },
      render: (text: string) => <div style={{ width: 15, height: 15, background: text }} />,
    },
    {
      title: getMessage('processButton.fontColor'),
      dataIndex: 'fontColor',
      editData: {
        type: 'Color',
        value: 'rgba(255, 255, 255, 1)',
      },
      render: (text: string) => <div style={{ width: 15, height: 15, background: text }} />,
    },
  ];
  const handleAdd = useCallback(() => {
    return { id: uuid(0, 15), bgColor: '#1989fa' };
  }, []);
  return (
    <div className="container">
      <Modal
        title={getMessage('processButton.editButton')}
        visible={tableVisible}
        destroyOnClose
        width={800}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <EditableTable
          dataSource={value}
          columns={tableColumns}
          onAdd={handleAdd}
          rowKey="id"
          scroll={{ y: 260 }}
          ref={tableRef}
        />
      </Modal>
    </div>
  );
};

export default ProcessConfigModal;
